<template>
	<view>

		<view class="worksiteList_box" >
			<!-- 顶部 -->
			<view class="worksiteHead_box">
				<view class="worksiteAdd" @click="projectAddClick">
					<u-icon name="plus" color="#327FE8" size="32"></u-icon>
					<text>新建</text>
				</view>
				<view class="worksiteHistory" @click="goPage('./worksiteHistory')">
					<text>历史工地</text>
					<u-icon name="arrow-right" color="#262626" size="32"></u-icon>
				</view>
			</view>

			<!-- 列表 -->
			<view class="worksiteList_con">
				<view class="worksiteItem" v-for="(item,index) in worksiteList" :key="index">
					<view class="worksiteHead_con" @click="switchChange(item.project_id,item.history)">
						<image class="projectImg" src="/static/projectIcon.png" mode=""></image>
						<view class="worksiteName">{{item.project_name}}</view>
						<view class="worksiteRole">{{item.roleStr}}</view>
						<view class="worksiteDefault" v-if="item.is_default==1">默认</view>
					</view>
					<view class="worksiteStatistics" @click="switchChange(item.project_id,item.history)">
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.total_num}}</view>
							<view class="statisticsType">总{{item.work_type==0?'工':'小时'}}</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.total_money}}</view>
							<view class="statisticsType">总工资</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.total_borrow}}</view>
							<view class="statisticsType">已支付</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">{{item.no_money}}</view>
							<view class="statisticsType">剩余工资</view>
						</view>
					</view>
					<view class="worksiteBottom_con" v-if="item.role!=3">
						<view class="worksiteSet" @click="setClick(item.project_id)">
							<u-icon name="setting" color="#8B8A90" size="40"></u-icon>
							<text>设置</text>
						</view>
						<view class="worksitePost">
							<view class="delBtn" @click="openDelShow(item.project_id)">删除</view>
							<view class="endBtn" @click="endClick(item.project_id)">完工</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 分页 -->
			<view class="dataEmpty_con">
				<!-- 加载更多 -->
				<view class="loadmore_box" v-if="worksiteList.length>0">
					<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
				</view>
			</view>
		</view>

		<!-- 无数据 -->
		<view class="emptyList_box" v-if="noProject">
			<view class="emptyPic">
				<image src="/static/emptyPic.png" mode=""></image>
			</view>
			<view class="emptyTit">您还未创建工地哦~</view>
			<view class="emptyDesc">快来尝试创建一个吧</view>
			<view class="emptyPost">
				<view class="emptyAdd" @click="projectAddShow = true">
					<u-icon name="plus" color="#fff" size="32"></u-icon>
					<text>新建</text>
				</view>
			</view>
		</view>

		<!-- 新建工地弹窗 -->
		<view @touchmove.stop.prevent="moveHandle">
			<u-popup v-model="projectAddShow" mode="bottom" :border-radius="30" duration="0" safe-area-inset-bottom closeable close-icon-size="40">
				<form @submit="addSubmit">
					<view class="addPop_box">
						<view class="addPop_tit">
							新建工地
						</view>
						<view class="peopleBox">
							<view :class="'peopleItem '+(peopleType==1?'active':'') " @click="peopleTypeSelect(1)">
								<view class="peopleIcon">
									<image src="/static/peopleType1.png" mode=""></image>
								</view>
								<view class="peopleMain">
									我是工人
									<text>给自己记工、记账</text>
								</view>
								<view class="peopleSelect" v-if="peopleType==1">
									<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
								</view>
							</view>
							<view :class="'peopleItem '+(peopleType==2?'active':'')" @click="peopleTypeSelect(2)">
								<view class="peopleIcon">
									<image src="/static/peopleType2.png" mode=""></image>
								</view>
								<view class="peopleMain">
									我是带班
									<text>给工人记工、记账</text>
								</view>
								<view class="peopleSelect" v-if="peopleType==2">
									<u-icon name="checkbox-mark" color="#fff" size="22"></u-icon>
								</view>
							</view>
						</view>

						<view class="handleList_box">
							<view class="handleList_con">
								<view class="handleLabel handleLabelLong">项目名称：</view>
								<view class="handleList">
									<view class="pickerCon">
										<input type="decimal" name="name" placeholder="请输入工地名称"
											placeholder-class="placeholderColor">
									</view>
								</view>
							</view>
							
							<view class="tckToDownOne tckTop">
								<text>记工方式</text>
								<view class="tckOneItemBox tckTop">
									<view  :class="'tckOneItem '+(workType==0?'typeActive':'')" @click="selectWorkType(0)">
										按工
									</view>
									<view :class="'tckOneItem '+(workType==1?'typeActive':'')" @click="selectWorkType(1)">
										按小时
									</view>
								</view>
							</view>
							<view class="handleList_con">
								<view class="handleLabel handleLabelLong">项目地址：</view>
								<view class="handleList">
									<view class="pickerCon" @click="getLocation">
										<input disabled :value="address" placeholder="请选择项目地址"
											placeholder-class="placeholderColor">
										<u-icon name="map-fill" color="#999" size="40"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="handlePost_con">
						<button class="completeBtn" form-type="submit" hover-class="none">确 认</button>
					</view>
				</form>
			</u-popup>
		</view>

		<!-- 删除工地弹窗 -->
		<u-mask :show="delShow">
			<view class="delPop_box">
				<view class="delPop_con">
					<form @submit="delSubmit">
						<view class="form_box">
							<!-- <view class="formIcon">
								<image src="/static/img/waringIcon.png" mode=""></image>
							</view> -->
							<view class="formTit">确定删除该项目吗？</view>
							<view class="formWarn">将会失去</view>
							<view class="formClass">
								<view class="classItem">
									记工记录
								</view>
								<view class="classItem">记账记录</view>
							</view>
							<view class="formDel">
								删除验证码【{{project_id}}】确认删除
							</view>
							<view class="controls">
								<input type="number" name="checkCard" placeholder='请输入删除验证码'
									placeholder-class="placeholderColor" />
							</view>
						</view>
						<view class="formPost_con">
							<view class="submitBtn cancelBtn" @click="delShow = false">取消</view>
							<button form-type="submit" hover-class="none" class="submitBtn continueBtn">确定</button>
						</view>
					</form>
				</view>
			</view>
		</u-mask>

		<!-- 编辑工地弹窗 -->
		<u-popup v-model="editShow" mode="center" border-radius="20" width="690rpx">
			<form @submit="editSubmit">
				<view class="tckTitleCenter">
					名称编辑
				</view>
				<view class="controls">
					<input class="input" type="text" name="name" v-model="projectInfo.project_name"
						placeholder='请输入工地名称' placeholder-class="placeholderColor" />
				</view>
				<view style="padding: 0 30rpx;">
					<view class="tckBtn tckTop">
						<view class="tckBtnItem" @click="editShow=false">
							
							取消
						</view>
						<view class="tckBtnItem">
							<button form-type="submit" hover-class="none">
								<!-- <image src="/static/img/backSuccess.png" mode=""></image> -->
								保存
							</button>
						</view>
					</view>
				</view>
			</form>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 工地列表
				worksiteList: [],
				in_num: 0,
				out_num: 0,

				// 新建弹窗
				addShow: false,
				projectInfo: {},
				project_id: 1,

				// 默认
				defaultChecked: false,
				delShow: false,
				editShow: false,

				projectAddShow: false,
				peopleType: 1,
				workType: 0,

				// 地址
				address: '',
				longitude: '',
				latitude: '',

				// 表单
				formData: {},
				noProject:false,
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			if (option.type == 'quick') {
				this.projectAddShow = true;
			}
		},
		onShow() {
			var _this = this;
			_this.pages = 1;
			_this.getWorksiteList();
		},
		onReady() {
			
			var worksiteList=uni.getStorageSync('worksiteList');
			this.worksiteList=worksiteList;
		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		onHide() {
			this.addShow = false;
		},
		methods: {
			
			//添加工地
			projectAddClick(){
				uni.navigateTo({
					url:'/pages/worksite/worksiteAdd'
				})
			},
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			moveHandle() {
				return false
			},

			// 选择身份
			peopleTypeSelect(type) {
				this.peopleType = type
			},
			
			selectWorkType(type){
				this.workType=type
			},

			// 获取当前位置
			getLocation() {
				var _this = this;
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						_this.address = res.address;
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
					}
				});
			},

			// 获取默认工地
			getDefaultWorksite() {
				var _this = this;
				_this.$u.get('/api/project.index/getDefault', {}).then(res => {
					console.log('==获取默认工地==');
					var defaultWorksite = res.data;
					// 缓存默认工地信息
					uni.setStorageSync('defaultWorksite', JSON.stringify(defaultWorksite));

				})
			},

			// 获取工地列表
			getWorksiteList() {
				var _this = this;
				_this.$u.get('/api/project.index/getList', {
					pages: _this.pages,
					limit: _this.limit,
					history: 0, //0正常、1历史
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工地列表==");
					console.log(res);
					var worksiteList = _this.worksiteList;
					if (_this.pages == 1) {
						worksiteList = [];
					}
					worksiteList = worksiteList.concat(res.data);
					_this.worksiteList=worksiteList;
					uni.setStorageSync('worksiteList',worksiteList);
					
					_this.in_num = res.extend.in_num;
					_this.out_num = res.extend.out_num;

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
					
					if(worksiteList.length==0){
						_this.noProject=true;
					}else{
						_this.noProject=false;
					}
				}).catch(res => {
					console.log(res);
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;

				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});
					_this.getWorksiteList();
				}, 2000)
			},

			// 设置默认
			switchChange(project_id, history) {
				var _this = this;

				if (history != 0) {
					uni.showModal({
						title: '提示',
						content: '请先恢复工地再进行操作',
						showCancel: false,
					})
					return;
				}
				_this.$u.get('/api/project.index/updateDefault', {
					project_id: project_id,
				}).then(res => {
					uni.hideLoading();
					// _this.pages = 1;
					// _this.getWorksiteList();
					uni.reLaunch({
						url: '/pages/index/index'
					})

					//更新默认工地
					_this.getDefaultWorksite()
				}).catch(res => {
					console.log(res);
				})
			},

			// 工地设置
			setClick(project_id) {
				uni.navigateTo({
					url: './worksiteSet?project_id=' + project_id
				})
			},

			// 完工项目
			endClick(project_id) {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确认完工项目？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.get('/api/project.index/setHistory', {
								project_id: project_id,
							}).then(res => {
								uni.hideLoading();
								console.log("==完工项目==");
								console.log(res);
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								setTimeout(function() {
									_this.pages = 1;
									_this.getWorksiteList();
								}, 2000)
								//更新默认工地
								_this.getDefaultWorksite()
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			// 提交工地
			addSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;
				var kindObj = _this.kindObj;

				if (!formData.name) {
					uni.showModal({
						content: '项目名称不能为空',
						showCancel: false,
					})
					return;
				}
				
				_this.formData = formData;
				_this.$u.throttle(_this.submitAddForm, 3000);
			},
			// 提交接口
			submitAddForm() {
				var _this = this;
				_this.$u.post('/api/project.index/add_do', {
					role: _this.peopleType,
					name: _this.formData.name,
					address: _this.address,
					work_type: _this.workType || '',
					lng: _this.longitude,
					lat: _this.latitude,
					// profession: _this.kindObj.label,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});

					//更新一下缓存工地
					_this.getDefaultWorksite();
					setTimeout(function() {
						_this.projectAddShow = false;
						_this.pages = 1;
						_this.getWorksiteList();
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			/**
			 * 删除
			 */
			openDelShow(projectId) {
				var _this = this;
				_this.delShow = true;
				_this.project_id = projectId;
			},
			delSubmit(e) {
				var _this = this;
				var delData = e.detail.value;
				if (_this.project_id != delData.checkCard) {
					uni.showModal({
						content: '验证码不对',
						showCancel: false,
					})
					return;
				}
				_this.delData = delData;
				_this.delShow = false;
				_this.$u.throttle(_this.delForm, 3000);
			},

			delForm() {
				var _this = this;
				_this.$u.post('/api/project.index/setDelete', {
					id: _this.project_id,
				}).then(res => {
					console.log("==删除==");
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						_this.getWorksiteList();
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			/**
			 * 编辑
			 */
			openEditShow() {
				var _this = this;
				_this.editShow = true;
			},
			editSubmit(e) {
				// console.log(e);
				var _this = this;
				var editData = e.detail.value;

				if (!editData.name) {
					uni.showModal({
						content: '项目名称不能为空',
						showCancel: false,
					})
					return;
				}

				_this.editData = editData;
				_this.$u.throttle(_this.editForm, 3000);
			},

			editForm() {
				var _this = this;
				_this.$u.post('/api/project.index/add_do', {
					id: _this.project_id,
					name: _this.editData.name,
				}).then(res => {
					console.log(res);
					_this.editShow = false;
					uni.showToast({
						title: '编辑成功',
						duration: 2000
					});
					setTimeout(function() {
						_this.getWorksiteDetail();
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.worksiteList_box {
		padding: 0 30rpx;
	}

	// 顶部
	.worksiteHead_box {
		padding: 30rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.worksiteAdd {
		width: 200rpx;
		height: 70rpx;
		background: #f0f6ff;
		border: 2rpx solid #cce0ff;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.worksiteAdd text {
		font-size: 32rpx;
		color: $uni-color-active;
		margin-left: 10rpx;
	}

	.worksiteHistory {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.worksiteHistory text {
		font-size: 32rpx;
		color: $uni-color;
		margin-right: 10rpx;
	}

	// 列表
	.worksiteList_con {
		overflow: hidden;
	}

	.worksiteItem {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.worksiteHead_con {
		overflow: hidden;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.projectImg {
		width: 30rpx;
		height: 30rpx;
	}

	.worksiteName {
		flex: 2;
		font-size: 28rpx;
		color: $uni-color;
		margin-left: 10rpx;
	}

	.worksiteRole {
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #4DA199;
		background: #D8F0ED;
		border-radius: 10rpx;
		overflow: hidden;
		margin-left: 20rpx;
	}

	.worksiteDefault {
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #FE6C6C;
		background: #FFF0F0;
		border-radius: 10rpx;
		margin-right: 10rpx;
		overflow: hidden;
		margin-left: 20rpx;
	}

	.worksiteForeman {
		font-size: 28rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.worksiteStatistics {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.statisticsItem {
		flex: 1;
		text-align: center;
	}

	.statisticsMoney {
		font-size: 32rpx;
		color: #333;
	}

	.statisticsType {
		font-size: 28rpx;
		color: $uni-color-text;
		margin-top: 10rpx;
	}

	.worksiteBottom_con {
		padding-top: 20rpx;
		border-top: 2rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.worksiteSet {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.worksiteSet text {
		color: $uni-color-text;
		margin-left: 10rpx;
	}

	.worksitePost {
		display: flex;
		align-items: center;
	}

	.delBtn {
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FF4241;
		border: 2rpx solid #FF4241;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-left: 30rpx;
	}

	.endBtn {
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 26rpx;
		color: $uni-color-white;
		background: $uni-color-active;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-left: 30rpx;
	}

	// 无数据
	.emptyList_box {
		width: 100%;
		height: 100vh;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
	}

	.emptyPic {
		width: 100%;
	}

	.emptyPic_con image {
		width: 435rpx;
		height: 381rpx;
	}

	.emptyTit {
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.emptyDesc {
		width: 100%;
		font-size: 28rpx;
		color: $uni-color-text;
		margin-top: 20rpx;
	}

	.emptyPost {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}

	.emptyAdd {
		width: 200rpx;
		height: 70rpx;
		background: #327FE8;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.emptyAdd text {
		font-size: 32rpx;
		color: $uni-color-white;
		margin-left: 10rpx;
	}

	// 新建工地弹窗
	.addPop_box {
		padding: 0 30rpx;
	}

	.addPop_tit {
		padding: 40rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		text-align: center;
		overflow: hidden;
	}

	.peopleBox {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
	}

	.peopleItem {
		flex: 1;
		height: 160rpx;
		padding: 40rpx 20rpx;
		border: 2rpx solid #F0F0F0;
		border-radius: 10rpx;
		color: $uni-color;
		font-size: 28rpx;
		line-height: 40rpx;
		position: relative;
	}

	.peopleItem.active {
		border: 2rpx solid $uni-color-active;
	}

	.peopleItem:last-child {
		margin-left: 20rpx;
	}

	.peopleIcon {
		width: 70rpx;
		height: 70rpx;
		float: left;
		margin-right: 10rpx;
	}

	.peopleIcon image {
		width: 100%;
		height: 100%;
	}

	.peopleMain text {
		display: block;
		color: $uni-color-text;
		font-size: 24rpx;
	}

	.peopleSelect {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 10rpx 0 30rpx;
		background-color: #327FE8;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
	}

	.handleList_box {
		padding: 15rpx 0;
	}
	
	// 删除工地弹窗
	.delPop_box {
		width: 100%;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
	}

	.delPop_con {
		width: 550rpx;
		background: linear-gradient(180deg, #327FE8 0%, #F5F6F8 20%);
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
	}

	.formIcon {
		text-align: center;
		margin-top: -73rpx;
	}

	.formIcon image {
		width: 146rpx;
		height: 146rpx;
	}

	.formTit {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 40rpx 0;
	}

	.formWarn {
		font-size: 30rpx;
		color: #999;
		text-align: center;
	}

	.formClass {
		overflow: hidden;
	}

	.classItem {
		font-size: 30rpx;
		color: #333;
		text-align: center;
		overflow: hidden;
		margin-top: 30rpx;
		position: relative;
	}

	.classItem::before {
		content: '';
		width: 16rpx;
		height: 16rpx;
		background: $uni-color-active;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-left: -80rpx;
	}

	.formDel {
		font-size: 30rpx;
		color: #333;
		text-align: center;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.delPost_con {
		padding: 0 30rpx 30rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cancelBtn {
		background: #eee;
		color: #333;
		font-weight: normal;
		color: $uni-color;
	}

	.continueBtn {
		font-weight: normal;
		color: $uni-color-white;
		background: $uni-color-active;
		margin-left: 40rpx;
	}

	.controls {
		border-radius: 20rpx;
		width: 100%;
		overflow: hidden;
		padding: 0 30rpx;
		margin: 20rpx auto;
	}

	.controls input {
		height: 90rpx;
		line-height: 20rpx;
		text-align: center;
		margin: 0;
		padding: 0;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: -4rpx;
	}
	
	.tckToDownOne{
		width: 100%;
		overflow: hidden;
		line-height: 90rpx;
	}
	.tckOneItemBox{
		width: 540rpx;
		float: right;
	}
	.tckOneItem{
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		margin: 0;
		padding: 0;
		background:#f0f0f0;
		border-radius: 10rpx;
		width: 200rpx;
		float: left;
		margin-right: 20rpx;
	}
	.typeActive{
		background:$uni-color-active;
		color: #fff;
	}
</style>
